<template>
  <!-- !楼层内容 -->
  <div class="layer-info">
    <section class="header">
      <a-page-header style="padding: 10px 16px 0 16px" :backIcon="false">
        <template #title>
          <a-space>
            <BlIcon type="tree-louceng" />
            <span>{{ layerDetail.layer_name }}</span>
          </a-space>
        </template>
        <template #extra>
          <a-space>
            <a-button danger @click="onLayerRemove">
              <template #icon>
                <DeleteOutlined />
              </template>
              删除
            </a-button>
            <a-button type="primary" ghost @click="editVisible = true">
              <template #icon>
                <FormOutlined />
              </template>
              编辑
            </a-button>
          </a-space>
        </template>
      </a-page-header>
    </section>
    <section class="content">
      <template v-if="!pageLoading">
        <!-- 房态管理 -->
        <RoomState
          showType="layer"
          :villageId="villageId"
          :buildId="layerDetail.build_id"
          :layerId="layerId"
        />
      </template>
    </section>
    <layer-edit
      :visible="editVisible"
      :content="layerDetail"
      @cancel="editVisible = false"
      @success="onLayerEditSuccess"
    />
  </div>
</template>
<script>
import { defineComponent, reactive, toRefs, watch } from "vue";
import request from "../../common/utils/request";
import { BlIcon } from "bl-common-vue3";
import { DeleteOutlined, FormOutlined } from "@ant-design/icons-vue";
import { message } from "ant-design-vue";
import LayerEdit from "../../views/village/BuildingManage/modules/LayerEdit.vue";
// 房态管理
import RoomState from "./modules/RoomState.vue";
import utils from "../../common/utils/utils";

export default defineComponent({
  name: "BuildInfo",
  components: { RoomState, BlIcon, DeleteOutlined, FormOutlined, LayerEdit },
  props: {
    // 展示类型 modal弹层展示 page页面内展示
    showType: {
      type: String,
      default: "modal",
    },
    // 项目id
    villageId: {
      type: Number,
      default: 0,
    },
    // 楼宇id 可选
    buildId: {
      type: Number,
      default: 0,
    },
    // 楼层id
    layerId: {
      type: Number,
      default: 0,
    },
  },
  setup(props, { emit }) {
    const state = reactive({
      pageLoading: false,
      // 菜单
      menuList: [],
      curentMenu: {},
      editVisible: false,
      layerDetail: {},
    });

    /** 删除楼层 */
    const onLayerRemove = () => {
      utils.modalConfirm({
        content: "确认删除本楼层吗？",
        centered: true,
        okType: "danger",
        onOk: () => {
          request
            .del("/village", "/project/layer", {
              village_id: props.villageId,
              id: props.layerId,
              needMsg: true,
            })
            .then((res) => {
              message.success(res.msg || "删除成功");
              emit("remove");
            });
        },
      });
    };

    /** 编辑楼层 */
    const onLayerEditSuccess = () => {
      state.editVisible = false;
      getLayerDetail(true);
    };

    /** 楼层详情 */
    const getLayerDetail = (refresh = false) => {
      request
        .get("/village", "/project/layer/detail", {
          id: props.layerId,
          village_id: props.villageId,
        })
        .then((res) => {
          state.layerDetail = res.detail;
          if (refresh) {
            emit("onChange", {
              name: state.layerDetail.layer_name,
              detail: state.layerDetail,
            });
          }
        })
        .finally(() => {
          state.pageLoading = false;
        });
    };

    /** 菜单选中 */
    const onMenuSelect = (menu) => {
      const { key } = menu;
      state.curentMenu = state.menuList.find((item) => item.alias == key);
    };

    /** 获取导航菜单 */
    const getMenuList = () => {
      if (state.menuList.length) {
        state.curentMenu = state.menuList[0];
        return;
      }
      request
        .get("/village", "/rentControl/menuList", {
          menu_type: "layer",
        })
        .then((res) => {
          state.menuList = res.list;
          state.curentMenu = res.list[0];
        });
    };

    const init = () => {
      if (!props.layerId) {
        return;
      }
      state.pageLoading = true;
      getLayerDetail();
    };

    watch(
      () => props.layerId,
      () => {
        init();
      }
    );

    init();

    return {
      ...toRefs(state),
      onMenuSelect,
      onLayerRemove,
      onLayerEditSuccess,
    };
  },
});
</script>
<style lang="less" scoped>
.layer-info {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  .content {
    flex: 1;
    padding: 8px;
    overflow: hidden auto;
    background-color: #f7f7f7;
  }
}
</style>
